<template>
  <div>
    <div class="status-top" :style="'padding-top:' + topHeight"></div>

    <div v-if="showCustom" class="top-bar-box" :style="{
      'padding-top': statusBarHeight + 'px', 'padding-bottom': custom.top - statusBarHeight
        + 'px', 'background': bgColor
    }" :class="{ out: !isShowbarCustom, 'colorWhite': !isColor }">
      <slot v-if="!title" name="content"></slot>
      <template v-else>

        <topBack v-if="isBack && isBtnShow" :color="isShowbar ? '#444' : '#fff'"></topBack>
        <homeIcon v-if="isBtnShow && !isBack"></homeIcon>
        <div class="title fontE1  tc colorMain"
          :class="{ 'font-bold-nav': brandModel == '三星', 'colorWhite': !isColor, 'titleFlex': flexS }"
          v-if="isCustomBack">{{
            title }}</div>

        <div class="search-box" v-if="isSearch" @click="inputSearchClick">
          <!-- <img
	        class="icon"
	        src="https://oss-prod.xtrip.vip/common/icon_house_search.png"
	        alt=""
	      /> -->
          <input placeholder-class="placeholder-class" class="input fontE1" type="text" disabled
            :placeholder="placeholder" />
        </div>
      </template>
    </div>
    <div v-if="!showCustom" class="top-bar-box" :style="{
      'padding-top': statusBarHeight + 'px', 'padding-bottom': custom.top - statusBarHeight
        + 'px', 'background': bgColor
    }" :class="{ out: !isShowbar }">
      <slot v-if="!title" name="content"></slot>
      <template v-else>
        <topBack v-if="isBack && isBtnShow" :color="isShowbar ? '#444' : '#fff'"></topBack>
        <homeIcon :isTitle="false" v-if="isBtnShow && !isBack"></homeIcon>
        <image class="header-url" v-if="isHome" :src="shopImg" mode="aspectFill"></image>
        <div class="title fontE1 "
          :class="{ 'ml-16': !isBtnShow, 'font-bold-nav': brandModel == '三星', 'titleFlex': flexS, 'headImgV': headImgS }"
          v-if="isShowbar">
          <slot v-if="showTitleImg" name="headImg"></slot>
          <span class="" v-else>{{ isHome ? sellerName : title }}</span>
        </div>
        <div :class="brandModel == '三星' ? 'font-bold-nav' : ''" v-if="isCustomBack">
          {{ title }}
        </div>
        <span class="title fontE1 colorMain"
          :class="{ 'ml-16': !isBtnShow, 'font-bold-nav': brandModel == '三星', 'titleFlex': flexS }" v-if="isShowbars">{{
            title
          }}</span>

        <div class="search-box" v-if="isSearch" @click="inputSearchClick">
          <!-- <img
	        class="icon"
	        src="https://oss-prod.xtrip.vip/common/icon_house_search.png"
	        alt=""
	      /> -->
          <input placeholder-class="placeholder-class" class="input fontE1" type="text" disabled
            :placeholder="placeholder" />
        </div>
      </template>
    </div>
  </div>
</template>
<script>

import TopBackAndHomeA from '../topBackAndHomeA.vue';

export default {
  props: {
    bgColor: {
      type: String,
      default: '#fff'
    },
    showTitleImg: {
      type: Boolean,
      default: false
    },
    isHome: {
      type: Boolean,
      default: false
    },
    isCustomBack: {
      type: Boolean,
      default: false
    },
    showCustom: {
      type: Boolean,
      default: false
    },
    isShowbarCustom: {
      type: Boolean,
      default: false
    },
    isColor: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: "搜索房源标题或城市",
    },
    flexS: {
      type: Boolean,
      default: false,
    },
    headImgS: {
      type: Boolean,
      default: false,
    },

    isBtnShow: {
      type: Boolean,
      default: true,
    },
    isShowbar: {
      type: Boolean,
      default: false,
    },
    isShowbars: {
      type: Boolean,
      default: false,
    },
    title: String,
    isSearch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      custom: null,
      brandModel: '',
      system: '',
      topHeight: "",
      isScrollTopOut: false,
      topOutTimeout: null,
      isBack: false,
      sellerName: getApp().globalData.shopInfo.sellerName
    };
  },
  computed: {
    shopImg() {
      return getApp().globalData.shopInfo.sellerAvatarUrl
    },
  },
  created() {
    this.custom = wx.getMenuButtonBoundingClientRect()
    this.brandModel = uni.getStorageSync('brandModel')
    this.system = uni.getStorageSync('system')
    this.topHeight = this.isShowbar ? this.statusBarHeight + 44 + "px" : 0;
    var pages = getCurrentPages();
    if (pages.length > 1) this.isBack = true;
  },

  onPageScroll(e) {
    this.isTopOut(e);
  },
  methods: {
    inputSearchClick() {
      this.$emit('search')
    },
    goBack() {
      uni.navigateBack({
        delta: 1,
        fail() {
          uni.switchTab({
            url: '/pages/home/home'
          })
        }
      });
    },
    isTopOut(e) {
      if (this.topOutTimeout) {
        clearTimeout(this.topOutTimeout);
      }
      this.topOutTimeout = setTimeout(() => {
        if (e.scrollTop > 50) {
          this.isScrollTopOut = true;
          console.log(this.isScrollTopOut);
        } else {
          this.isScrollTopOut = false;
        }
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
.header-url {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  margin: 0 20rpx;
}

.top-bar-box {
  transition: all .3s;
  height: calc(88upx);
  // background: #fff !important;
  transition: 0.3s all;
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100%;
  padding-top: var(--status-bar-height);
  display: flex;
  align-items: center;
  box-sizing: content-box;
  z-index: 9999;
  left: 0;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #000000;
    // line-height:calc(88rpx);
    line-height: 50rpx;
    margin-top: -6rpx;
    width: 500rpx;
    margin: 0 auto;
    display: block;
    text-align: center;
    align-items: center;
    // font-size: 28rpx;
    //    font-family: PingFangSC-Medium;
    // font-weight:500;
    //    color: #2a2625;
    //    // line-height: 40rpx;
    //    // max-width: 300rpx;
    // width:100%;
    //    font-size: 34rpx;
    //    // font-family: DOUYU-Font, DOUYU;
    //    // font-weight: normal;
    //    // color: #4C91FF;
    // height:calc(88rpx);
    //    line-height: calc(88rpx);
    // background: linear-gradient(135deg, #464B52 0%, #222222 100%);
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
  }

  .back-word {
    font-size: 28upx;
    color: #fff;
    width: 96rpx;
    line-height: 88upx;
    text-align: center;
  }

  &.out {
    background: rgba(0, 0, 0, 0);

    .back-word {
      color: $uni-text-color;

      .cuIcon-back {
        color: $uni-text-color;
      }
    }
  }

  .search-box {
    width: 260rpx;
    height: 60rpx;
    background: #f7f7f7;
    border-radius: 30rpx;
    position: relative;

    .icon {
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      left: 20rpx;
      top: 20rpx;
    }

    .input {
      width: 100%;
      height: 100%;
      font-size: 24rpx;
      line-height: 100%rpx;
      margin-left: 48rpx;
      padding-right: 70rpx;
    }
  }
}

.headImgV {
  width: auto !important;
  display: flex !important;
  margin: 0 !important;
}

.titleFlex {
  width: auto !important;
  display: flex !important;
}

::deep .placeholder-class {
  color: #999 !important;
}

.status-top {
  background: transparent;
}

.tc {
  text-align: center !important;
}
</style>
